<template>
    <div class="toolbar flex flex-row flex-nowrap justify-between text-slate-600 text-xs">
        <Form layout="inline">
            <FormItem label="语言">
                <Select size="small" class="min-w-24" :disabled="disabled" :value="config.language"
                    @change="handleSelectLanguage">
                    <SelectOption :value="option" :key="option" v-for="option in languages">
                        {{ option }}
                    </SelectOption>
                </Select>
            </FormItem>
            <FormItem label="主题">
                <Select size="small" class="min-w-24" @change="handleSelectTheme" :disabled="disabled" :value="config.theme">
                    <SelectOption :value="option" :key="option" v-for="option in ['default', ...themes]">
                        {{ option }}
                    </SelectOption>
                </Select>
            </FormItem>
            <FormItem>
                <Checkbox :disabled="disabled" v-model:checked="isEdit" @change="handleEditor">编辑</Checkbox>
            </FormItem>
            <FormItem>
                <Checkbox :disabled="disabled" v-model:checked="isFocus" @change="handleFocus">自动焦点</Checkbox>
            </FormItem>
        </Form>
        <div class="text-white flex bg-indigo-400 items-center justify-end flex-row text-xs tracking-widest leading-4 rounded">
            <div @click="handleClear" class="flex items-center hover:bg-indigo-500 rounded whitespace-nowrap p-1.5 border-solid cursor-pointer border-r border-slate-50">清空内容</div>
            <div @click="handleCopy" class="flex items-center hover:bg-indigo-500 rounded whitespace-nowrap p-1.5 border-solid cursor-pointer border-r border-slate-50">复制</div>
            <div @click="handleSave" class="flex items-center hover:bg-indigo-500 rounded whitespace-nowrap p-1.5 border-solid cursor-pointer border-slate-50">另存为</div>
        </div>
        <div class="item" v-if="false">
            <label for="indentWithTab">indentWithTab:</label>
            <input type="checkbox" id="indentWithTab" :disabled="disabled" v-model="config.indentWithTab" />
        </div>
        <div class="item" v-if="false">
            <label for="tabSize">tabSize:</label>
            <Select size="small" :disabled="disabled" v-model.number="config.tabSize">
                <SelectOption :value="option" :key="option" v-for="option in [2, 4, 6, 8]">
                    {{ option }}
                </SelectOption>
            </Select>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Select, SelectOption,Form,FormItem,Checkbox } from 'ant-design-vue'
export default defineComponent({
    name: 'Toolbar',
    components: {
        Select,
        SelectOption,
        Form,
        FormItem,
        Checkbox
    },
    data() {
        return {
            isEdit: false,
            isFocus:true
        }
    },
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        config: {
            type: Object,
            required: true
        },
        languages: {
            type: Array as PropType<Array<string>>,
            required: true
        },
        themes: {
            type: Array as PropType<Array<string>>,
            required: true
        },
        focus: {
            type: Boolean,
            default: false
        }
    },
    mounted(){
        this.isEdit = !this.config?.disabled||false;
        this.isFocus = this.focus||true
    },
    methods: {
        handleClear(){
            this.$emit('clear',true)
        },
        handleSave() {
            this.$emit('save')
        },
        handleCopy() {
            this.$emit('copy')
        },
        handleSelectLanguage(value: any) {
            this.$emit('language', value)
        },
        handleSelectTheme(value: any) {
            this.$emit('theme',value)
        },
        handleEditor(value: any) {
            console.info(value,'editor')
            this.$emit('editable',this.isEdit)
        },
        handleFocus(value: any){
            this.$emit('focus',this.isFocus)
        }
    }
})
</script>
<style lang="scss" scoped>
.toolbar {
    background-color: #fff;
    text-align: left;
    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3rem;
    padding: 0 1em;
}
</style>